<template>
  <div>
    <h2 class="title">请选择排班规则</h2>
    <el-radio-group class="ruleChoice" v-model="radio">
      <el-radio :label="1">排班规则一</el-radio>
      <el-radio :label="2">规则二</el-radio>
      <el-radio :label="3">规则三</el-radio>
      <el-radio :label="4">规则四</el-radio>
      <el-radio :label="5">规则五</el-radio>
    </el-radio-group>
    <div class="tableContainer">
      <table>
        <thead>
          <tr class="headline">
            <th style="min-width: 150px">姓名</th>
            <th
              style="min-width: 150px"
              v-for="(item, index) in thItem"
              :key="index"
            >
              <h3>{{ item.week }}</h3>
              <h3>{{ item.day }}</h3>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(people, index) in infors" :key="index">
            <td>{{ people.name }}</td>
            <td
              v-for="(day, index) in people.days"
              :key="index"
              @click="changeWork(people, day)"
            >
              <div class="workCotainer">
                <div
                  class="workItem"
                  v-for="(workItem, index) in day.work"
                  :key="index"
                  :class="{
                    workItem1: workItem == '必须加班',
                    workItem2: workItem == '强制加班',
                    workItem3: workItem == '别想放假',
                  }"
                >
                  {{ workItem }}
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "schemanage",
  data() {
    return {
      thItem: [
        {
          week: "周一",
          day: "20",
        },
        {
          week: "周二",
          day: "21",
        },
        {
          week: "周三",
          day: "21",
        },
        {
          week: "周四",
          day: "21",
        },
        {
          week: "周五",
          day: "21",
        },
        {
          week: "周六",
          day: "21",
        },
        {
          week: "周日",
          day: "21",
        },
      ],
      infors: [
        {
          name: "zyx",
          days: [
            {
              time: "周一",
              work: ["强制加班", "必须加班", "别想放假"],
            },
            {
              time: "周二",
              work: ["强制加班", "别想放假"],
            },
            {
              time: "周三",
              work: ["强制加班", "别想放假"],
            },
            {
              time: "周四",
              work: ["强制加班", "必须加班", "别想放假"],
            },
            {
              time: "周五",
              work: ["必须加班", "别想放假"],
            },
            {
              time: "周六",
              work: ["强制加班", "别想放假"],
            },
            {
              time: "周六",
              work: [],
            },
          ],
        },
        {
          name: "whn",
          days: [
            {
              time: "周一",
              work: ["强制加班", "必须加班", "别想放假"],
            },
            {
              time: "周二",
              work: ["强制加班", "别想放假"],
            },
            {
              time: "周三",
              work: ["强制加班", "别想放假"],
            },
            {
              time: "周四",
              work: ["强制加班", "必须加班", "别想放假"],
            },
            {
              time: "周五",
              work: ["必须加班", "别想放假"],
            },
            {
              time: "周六",
              work: ["强制加班", "别想放假"],
            },
            {
              time: "周六",
              work: [],
            },
          ],
        },
        {
          name: "芬兰",
          days: [
            {
              time: "周一",
              work: ["强制加班", "必须加班", "别想放假"],
            },
            {
              time: "周二",
              work: ["强制加班", "别想放假"],
            },
            {
              time: "周三",
              work: ["强制加班", "别想放假"],
            },
            {
              time: "周四",
              work: ["强制加班", "必须加班", "别想放假"],
            },
            {
              time: "周五",
              work: ["必须加班", "别想放假"],
            },
            {
              time: "周六",
              work: ["强制加班", "别想放假"],
            },
            {
              time: "周六",
              work: [],
            },
          ],
        },
      ],
      radio: "",
    };
  },
  methods: {
    changeWork(people, work) {
      console.log(people);
      console.log(work.time);
    },
  },
};
</script>

<style scoped>
/* 设置表格样式 */
table {
  /* border-collapse: collapse; */
  /* width: 100%; */
}

/* 设置表头样式 */
th {
  color: white;
  /* border: 1px solid white; */
  background-color: #fe6639;
  text-align: center;
  padding: 8px;
  /* width: 150px; */
}

/* 设置表格单元格样式 */
td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: white;
  text-align: center;
  padding: 8px;
}

/* 设置表格奇数行背景色 */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}
/* 设置鼠标样式 */
td:hover {
  cursor: pointer;
}
tr {
  height: 60px;
}
.headline {
  height: 60px;
}
.workCotainer {
}

.workItem {
  color: white;
  font-size: 14px;
}
.workItem1 {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 9px;
  background-color: #3765ff;
}
.workItem2 {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 9px;

  background-color: #f93955;
}
.workItem3 {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 9px;

  background-color: #1acaba;
}
.ruleChoice {
  margin: 20px;
}
/* table {
  overflow-x: hidden;
} */

.tableContainer {
  width: 95%;
  margin: 0 auto;
  overflow-x: scroll;
}
.title {
  margin-left: 20px;
}
</style>